<template>
  <div class="index" v-loading="loading">
    <!-- 标题 -->
    <module-title :title="moduleTitle"></module-title>

    <!-- 任务行业查询 start -->
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.orderName" placeholder="工单名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{background:'#d9d9d9', color: 'rgb(16, 116, 253)'}">
        <el-table-column
          prop="workId"
          label="工单ID">
        </el-table-column>
        <el-table-column
          prop="orderName"
          label="工单名称">
        </el-table-column>
        <el-table-column
          prop="status"
          label="工单状态">
          <template slot-scope="scope">
            <div>{{scope.row.status === 0 ? '关闭' : '开启'}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderType"
          label="工单类型">
        </el-table-column>
        <el-table-column
          prop="isDistribute"
          label="分配状态">
          <template slot-scope="scope">
            <div>{{scope.row.isDistribute ? '已分配' : '未分配'}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="分配工单">
          <template  slot-scope="scope">
            <div style="display: flex;justify-content: space-around">
              <el-button type="text" @click="editCount(scope.row)" style="color: #2D81FF;">编辑</el-button>
              <el-button type="text" style="color: green;" @click="addCount(scope.row)">添加分配</el-button>
              <el-button type="text" style="color: orange;" @click="stopAllCount(scope.row)">停止所有分配</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size=formInline.pageSize
        layout="total, prev, pager, next, jumper"
        :total=total
        style="text-align: center;margin-top: 20px">
      </el-pagination>

<!--      弹出-->
      <el-dialog title="分配详情" :visible.sync="dialogTableVisible" v-loading="loadingDialog">
        <div style="display: flex;justify-content: space-between;margin-bottom: 10px">
          <div>已分配工作室</div>
          <div style="color: #2D81FF">共{{gridData.length}}个</div>
        </div>
        <el-table :data="gridData" border>
          <el-table-column property="account" label="工作名称"></el-table-column>
          <el-table-column property="distributeNum" label="分配状态">
            <template slot-scope="scope">
              已分配{{scope.row.distributeNum}}个
            </template>
          </el-table-column>
          <el-table-column  label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="stopItem(scope.row)" style="color: orange;">停止分配</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogTableVisible = false">确 认</el-button>
        </div>
      </el-dialog>
      <el-dialog title="分配工作室" :visible.sync="dialogTableVisibleManage" v-loading="loadingDialog">
        <el-form :inline="true" :model="formAssign" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="formAssign.account" placeholder="工作室名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="studioData" border @selection-change="handleSelectionChange">
          <el-table-column
            type="selection">
          </el-table-column>
          <el-table-column property="account" label="工作名称"></el-table-column>
          <el-table-column property="distributeNum" label="分配状态">
            <template slot-scope="scope">
              已分配{{scope.row.distributeNum}}个
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChangeStudio"
          :page-size=formAssign.pageSize
          layout="total, prev, pager, next, jumper"
          :total=studioTotal
          style="text-align: center;margin-top: 20px">
        </el-pagination>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogTableVisibleManage = false">取 消</el-button>
          <el-button type="primary" @click="submitSelectStudio">确 认</el-button>
        </div>
      </el-dialog>
    </el-card>
    <!-- 任务行业查询 end -->
  </div>
</template>

<script>
  import ModuleTitle from "@/components/content/ModuleTitle.vue";

  import { createSign } from "@/utils/sign";
  import API from "@/network/api/smsApi";
  export default {
    name: "index",
    data() {
      return {
        total: 0,
        moduleTitle: "分配工单",
        formInline: {
          orderName: '',
          orderType: '',
          status: '',
          pageSize: 10,
          pageNum: 1
        },
        formAssign: {
          account: '',
          pageSize: 10,
          pageNum: 1,
          workId: 0
        },
        formDetail: {
          account: '',
          pageSize: 10,
          pageNum: 1,
          workId: 0
        },
        gridData: [],
        tableData: [],
        studioData: [],
        studioTotal: 0,
        dialogTableVisible: false,
        dialogTableVisibleManage: false,
        selectStudio: [],
        loading: false,
        loadingDialog: false
      };
    },
    created() {
      this.orderList();
    },
    methods: {
      orderList () {
        this.loading = true
        API.queryDistributeWorkOrder(this.formInline).then(res => {
          console.log(res)
          if (res.data.code === 0) {
            this.tableData = res.data.data.records
            this.total = res.data.data.total
          }
          this.loading = false
        })
      },
      onSubmit() {
        console.log('submit!');
        this.orderList();
      },
      onReset () {
        this.formInline.orderName = '';
        this.orderList();
      },
      editCount (res) {
        console.log(res)
        this.dialogTableVisible = true
        this.formDetail.workId = res.workId
        this.queryDistributeStudio()
      },
      stopAllCount (res) {
        this.formDetail.workId = res.workId
        this.loading = true
        API.queryDistributeStudio(this.formDetail).then(res => {
          console.log(res)
          if (res.data.code === 0) {
            var stopAllAssign = {
              workId: this.formDetail.workId,
              accounts: []
            }
            res.data.data.forEach(item => {
              stopAllAssign.accounts.push(item.account)
            })
            API.cancelDistribute(stopAllAssign).then(res => {
              console.log(res)
              if (res.data.code === 0) {
                this.$message.success('已停止所有分配')
                this.orderList()
              } else {
                this.$message.error('停止异常')
              }
              this.loading = false
            })
          }
        })
      },
      queryDistributeStudio () {
        this.loadingDialog = true
        API.queryDistributeStudio(this.formDetail).then(res => {
          console.log(res)
          if (res.data.code === 0) {
            this.gridData = res.data.data
          }
          this.loadingDialog = false
        })
      },
      addCount (res) {
        console.log(res)
        this.dialogTableVisibleManage = true
        this.formAssign.workId = res.workId
        this.loadingDialog = true
        API.distributeStudio(this.formAssign).then(res => {
          console.log(res)
          if (res.data.code === 0) {
            this.studioData = res.data.data.records
            this.studioTotal = res.data.data.total
          }
          this.loadingDialog = false
        })
      },
      stopItem (res) {
        console.log(res)
        this.loadingDialog = true
        var stopAssign = {
          workId: this.formDetail.workId,
          accounts: [res.account]
        }
        API.cancelDistribute(stopAssign).then(res => {
          console.log(res)
          if (res.data.code === 0) {
            this.loadingDialog = false
            this.$message.success('成功停止')
            this.queryDistributeStudio()
          } else {
            this.$message.error('停止异常')
          }
        })
        this.queryDistributeStudio()
      },
      handleCurrentChange(val) {
        console.log(val)
        this.formInline.pageNum = val;
        // this.orderList();
      },
      handleCurrentChangeStudio(val) {
        console.log(val)
        this.formInline.pageNum = val;
        // this.orderList();
      },
      handleSelectionChange(val) {
        console.log(val)
        this.selectStudio = val
      },
      submitSelectStudio() {
        this.loadingDialog = true
        this.dialogTableVisibleManage = false
        var formStudio = {
          workId: this.formAssign.workId,
          accounts: []
        }
        this.selectStudio.forEach(item => {
          console.log(item)
          formStudio.accounts.push(item.account)
        })
        API.distribute(formStudio).then(res => {
          console.log(res, 'res')
          if (res.data.code === 0) {
            this.loadingDialog = false
            this.$message.success('添加成功')
            this.orderList()
          } else {
            this.$message.error('添加异常')
          }
        })
      }
    },
    components: { ModuleTitle }
  };
</script>

<style scoped>
  .card-title {
    color: #1074fd;
    font-size: 18px;
    margin-bottom: 14px;
  }

  /* 任务行业查询 */
  .trade-query-label {
    color: #1a1a1a;
    font-size: 18px;
  }
  .trade-query-input {
    width: 225px;
    height: 44px;
    margin-left: 10px;
    margin-right: 30px;
  }
  .trade-query-button {
    width: 64px;
    height: 40px;
    padding: 0;
    border-width: 0;
    background-color: #1074fd;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
  }

  /* 任务行业列表 */
  .list {
    position: relative;
    width: 48%;
    height: 356px;
    border: 1px solid #d9d9d9;
  }
  .list-header {
    display: flex;
    height: 50px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #d9d9d9;
    text-align: center;
    line-height: 50px;
  }
  .list-body {
    display: flex;
    height: 51px;
    border-bottom: 1px solid #d9d9d9;
    text-align: center;
    line-height: 50px;
  }
  .add-button {
    background-color: #1074fd;
    color: #ffffff;
    border: 1px solid #1074fd;
  }
  .stand-center {
    width: 100% !important;
  }
  .noneList {
    position: relative;
    width: 100%;
    height: 356px;
    margin: 0 auto 40px;
    text-align: center;
    line-height: 356px;
    font-size: 30px;
  }
</style>
